<template>
	<view v-if="mode === 'default'" class="chat-message flex-row" :class="{reverse: isReverse && isSenderThemselve}">
		<xbc-avatar :src="avatar || message.senderAvatar" />
		<view class="chat-message-info flex-column" :style="{ maxWidth }">
			<view v-if="userName" class="chat-message-name">{{ userName }}</view>
			<slot>
				<xbc-message-system v-if="message.type == 'system'" :message="message" />
				<xbc-message-system v-if="message.type == 'notice'" :message="message" />
				<xbc-message-location v-if="message.type == 'location'" :message="message" />
				<xbc-message-card v-if="message.type == 'card'" :message="message" />
				<xbc-message-file v-if="message.type == 'file'" :message="message" />
				<xbc-message-image v-if="message.type == 'image'" :message="message" />
				<xbc-message-video v-if="message.type == 'video'" :message="message" />
				<xbc-message-audio v-if="message.type == 'audio'" :message="message" />
				<xbc-message-text v-if="message.type == 'text'" :message="message" />
				<xbc-message-text v-if="isQuote()" />
			</slot>
		</view>
	</view>
	<view v-if="mode === 'custom'">
		<slot></slot>
	</view>
</template>

<script lang="ts" setup>
import { useMessage } from '@/hooks/useMessage'

const props = defineProps({
  mode: { type: String, default: 'default' }, // 渲染模式
  avatar: { type: String, default: '' },
  message: { type: Object, default: () => {} },
  isReverse: { type: Boolean, default: true },  // 是否控制消息的方向
  maxWidth: { type: String, default: '80%' },  // 最大宽度
})

const { isSenderThemselve, userName } = useMessage(props)

function isQuote() {
  return JSON.parse(props.message?.content || '{}')?.quote
}
</script>

<style lang="scss" scoped>
.chat-message {
  padding: 20rpx 30rpx;
  align-items: flex-start;
  justify-content: flex-start;

  &-info {
    max-width: 50%;
    padding: 0 20rpx;
    align-items: flex-start;
  }

  &-name {
    color: #666;
    font-size: 28rpx;
    text-align: left;
    margin-bottom: 10rpx;
    transform: translateY(-6rpx);
  }

  &.reverse {
    flex-direction: row-reverse;

    .chat-message-info {
      align-items: flex-end;
    }

    .chat-message-name {
      text-align: right;
    }
  }
}
</style>